<template>
	<view class="dianxin">
		<view class="status_bar">
		</view>
		<view class="yujing-word1">
		<image src="../../../static/yujing/back.png" mode="" @click="to_shouye"></image>
			<view class="word1-word">
				电信诈骗案例
			</view>
		</view>
		<waterfall-flow :list="list" @click="choose"></waterfall-flow>
	</view>
</template>

<script>
	// 瀑布流组件
	import WaterfallFlow from '@/components/nairenk-waterfall-flow/nairenk-waterfall-flow.vue';
	// 模拟 JSON 数据
	const data = require('@/static/json/dianxindata.json');
	export default {
		components: {
			WaterfallFlow
		},
		data() {
			return {
				page: 1,
				start: 0,
				end: 0,
				list: [], // 列表
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			this.page++;
			this.getList();
		},
		methods: {
			to_shouye(){
				uni.switchTab({
					url:"../anli"
				})
			},
			// 选中
			choose(item) {
				console.log(item);
				console.log(item.nav);
			}
			,
			// 模拟加载数据
			getList() {
				if (this.list.length < data.list.length) {
					uni.showLoading({
						title:"加载中"
					})
					setTimeout(() => {
						this.end = this.page * 10;
						this.list = this.list.concat(data.list.slice(this.start, this.end));
						this.start = this.end;
						uni.hideLoading();
					}, 1000)
				}
			}
		}
	}
</script>

<style>
	page {
		background-image: url(@/static/yujing/yujingbg.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
	}
	*{
		padding: 0%;
		margin: 0%;
	}
	image{
		display: flex;
	}
	.yujing-word1{
		width: 90%;
		height: 100rpx;
		margin: auto;
		margin-top: 40rpx;
		position: relative;
		
	}
	.word1-word{
		color: white;
		font-size: 40rpx;
		text-align: center;
		letter-spacing: 15rpx;
		
	}
	.yujing-word1 image{
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
</style>
